<template>
  <div class="cate-lists">
    <!--  -->
    <SearchBar @onSearch="onSearch"/>
    <!--  -->
    <el-button type="primary" @click="CateAddShow">新增商品分类</el-button>
    <!-- 表格 -->
    <el-table :data="cates" style="width: 100%;margin-top:15px;height: 500px">
    <el-table-column prop="cateName" label="分类名称" width="330" />
    <el-table-column prop="icon" label="分类图标" width="330" >
      <template #default="{row}">
          <img :src="row.icon"  height="80" alt="">
          <!-- {{ row.icon }} -->
        </template>
    </el-table-column>
    <el-table-column prop="enable" label="是否启用" width="330" >
      <template #default="{row}">
          <el-switch
            v-model="row.enable"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="swicthEnable(row.id, row.enable)"
          />
        </template>
    </el-table-column>
    <el-table-column  label="操作" >
      <template #default="{row}">
          <el-button type="success" @click="showUpdateDialog(row.id)" size="default">编辑</el-button>
          <el-button type="danger" @click="delItem(row.id)" size="default">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  <!-- 表格 -->
  <!-- 分页组件 -->
  <el-pagination
      layout="prev, pager, next, sizes, jumper, total"
      v-model:current-page="page"
      v-model:page-size="pageSize"
      background :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
      style="margin-top:15px;"
      />
      <!-- 编辑弹窗页 -->
      <el-dialog v-model="cateUpdateShow" title="修改商品分类">
        <UpCate :id="cateId"/>
      </el-dialog>
      <!-- 新增分类商品 -->
      <el-dialog v-model="cateAddShow"  title="增加商品分类">
        <CateAdd :id="cateId"/>
      </el-dialog>
  </div>
</template>

<script  setup lang="ts" name="CateLists">
import { ref, reactive, onMounted } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { fetchCateLists , updateCate , delCate } from '@a/cateLists'
import UpCate from './components/UpdateCate.vue'
import CateAdd from './components/CateAdd.vue'
// 引入关键字搜索
import SearchBar from '@c/SearchBar.vue';
import { useRoute,useRouter } from 'vue-router';
import type UpdateCate from './components/UpdateCate.vue';
const route = useRoute()
const router = useRouter()
// 点击显示编辑弹窗页
const cateUpdateShow = ref<boolean>(false)
// 新增商品分类的弹窗
const cateAddShow = ref<boolean>(false)
// 预留一下当前商品的id
const cateId = ref<number>(-1)

// 列表数据
const cates = ref<any[]>([])
// 一共多少条
const total = ref<number>(0)
// 第几页
const page = ref<number>(1)
// 一页多少条
const pageSize = ref<number>(10)
// 关键字
const keyWords = ref<string>('')
// 
let cateName = ref<string>('')

// 编辑商品弹窗显示
const showUpdateDialog = (id:any) => {
  cateUpdateShow.value = true
  cateId.value = id
}
// 点击显示增加商品分类弹窗
const CateAddShow = (id:any) => {
  cateAddShow.value = true
  cateId.value = id
}
// 删除商品
const delItem = (id:number) => {
    // 弹出框的内容 上面的是提示信息,下面的是弹出标题
  ElMessageBox.confirm(
    '是否删除该分类,确定删除吗?',
    '删除分类',
  ).then(() => {
    delCate({id}).then(res => {
      if(res.data.code === 200){
        ElMessage({
          // 提示的内容
          message: res.data.msg,
          type: 'success',
          // 删除后多少秒后执行后面onClose里面的代码
          duration: 1500,
          onClose: () => {
            // 删除成功后刷新页面
            router.go(0)
          }
        })
      }else {
        ElMessage({
        message: "删除商品失败",
        type: 'error'
      })
      }
    })
  })
}

// 点击开关修改当前分类 启用状态
const swicthEnable = (id:number, enable:boolean) => {
  updateCate({
    id,
    enable
  }).then(res => {
    console.log(res);
    
    if (res.data.code === 200) {
          // 成功后 弹出消息提示框提醒用户
          ElMessage({
            type: 'success',
            message: res.data.msg,
            duration: 1500,
            onClose: () => {
              // 刷新页面
              // router.go(0)
            }
          })
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg
          })
        }
  })
}
// 关键字筛选
const onSearch = () => {
  fetchCate()
  keyWords.value = ''
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  setTimeout(() => {
    loading.close()
  }, 2000)
}
// pageSizeChange 改变时触发该事件
const sizeChange = () => {
  fetchCate()
}
// pageChange 改变时触发该事件
const pageChange = () => {
  fetchCate()
}
// 获取分类列表
const fetchCate = () => {
  fetchCateLists({
    page: page.value,
    pageSize: pageSize.value,
    keyWords: keyWords.value
  }).then(res =>{
    if (res.data.code === 200) {
      cates.value = res.data.data.lists
      total.value = res.data.data.total
    }
    console.log(res);
  })
}
// 初始化前获取
onMounted(() => {
  fetchCate()
})
</script>

<style lang="scss" scoped>

</style>